<!doctype html>
<html lang=en xmlns:th="http://www.thymeleaf.org">
<head>
  <title>CATS v DOGS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!-- [START cloudrun_end_user_firebase_scripts]-->
  <!-- [START run_end_user_firebase_scripts]-->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first-->
  <script src="https://www.gstatic.com/firebasejs/7.18/firebase-app.js"></script>
  <!-- Add Firebase Auth service-->
  <script src="https://www.gstatic.com/firebasejs/7.18/firebase-auth.js"></script>
  <!-- [END run_end_user_firebase_scripts]-->
  <!-- [END cloudrun_end_user_firebase_scripts]-->
  <script src="/config.js"></script>
  <script src="/firebase.js"></script>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐱</text></svg>">
</head>
<body class="yellow lighten-5">
  <nav class="teal darken-3">
    <div class="nav-wrapper container"><a class="brand-logo center" href="#!">CATS v DOGS</a>
      <ul class="left" id="nav-mobile">
        <button class="waves-effect waves-light btn" id="signInButton">Sign In with Google</button>
      </ul>
    </div>
  </nav>
  <div class="section" id="form">
    <div class="center">
      <h4>{{leaderMessage}}</h4>
    </div>
    <div class="row center">
      <div class="col s6 m5 offset-m1">
        <div class="{{ternary leadTeam 'CATS' 'card-panel teal lighten-4' 'card-panel'}}">
          <i class="material-icons large">🐱</i>
          <h3>{{catsCount}} votes</h3>
          <button class="btn" id="voteCats">Vote for CATS</button>
        </div>
      </div>
      <div class="col s6 m5">
        <div class="{{ternary leadTeam 'DOGS' 'card-panel teal lighten-4' 'card-panel'}}">
          <i class="material-icons large">🐶</i>
          <h3>{{dogsCount}} votes</h3>
          <button class="btn" id="voteDogs">Vote for DOGS</button>
        </div>
      </div>
    </div>
    <h4 class="header center">Recent Votes</h4>
    <ul class="container collection center" >
      {{#each votes}}
      <li class="collection-item avatar">
        <i class="material-icons circle teal lighten-1">{{ternary this.candidate 'CATS' '🐱' '🐶'}}</i>
        <span class="title">A vote for </span><b>{{this.candidate}}</b>
        <p>was cast at {{this.time_cast}}</p>
      </li>
      {{/each}}
    </ul>
  </div>
  <script>
    document.getElementById("voteCats").addEventListener("click", function () {
      vote("CATS");
    });
    document.getElementById("voteDogs").addEventListener("click", function () {
      vote("DOGS");
    });
    document.getElementById('signInButton').addEventListener("click", toggle);
  </script>
</body>
</html>
